{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '常用插件:example/plugin/index', 'chart.js'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <div class="callout callout-info mb-3">插件使用chartjs v3.9.1，查看中文文档：<a href="http://chartjs.cn/docs/" target="_blank">chart.js</a></div>

          <div class="row">
            <div class="col-lg-6 mb-3">
              <h6>线形图 - 1</h6>
              <canvas id="chart-line-1" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>线形图 - 2</h6>
              <canvas id="chart-line-2" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>线形图 - 3</h6>
              <canvas id="chart-line-3" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>线形图 - 4</h6>
              <canvas id="chart-line-4" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>垂直条形图</h6>
              <canvas id="chart-vbar-1" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>条形图边框半径</h6>
              <canvas id="chart-vbar-2" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>水平条形图</h6>
              <canvas id="chart-hbar" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>浮动条形图</h6>
              <canvas id="chart-float-bar" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>堆叠横条图</h6>
              <canvas id="chart-stacked-bar" width="400" height="250"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>饼图</h6>
              <canvas id="chart-pie" width="280" height="280"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>环形图</h6>
              <canvas id="chart-doughnut" width="280" height="280"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>雷达图</h6>
              <canvas id="chart-radar" width="360" height="360"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>极区图</h6>
              <canvas id="chart-polar" width="360" height="360"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>气泡图</h6>
              <canvas id="chart-bubble" width="280" height="280"></canvas>
            </div>
            <div class="col-lg-6 mb-3">
              <h6>离散图</h6>
              <canvas id="chart-scatter" width="280" height="280"></canvas>
            </div>
            <div class="col-lg-6">
              <h6>混合图表</h6>
              <canvas id="chart-mixed" width="280" height="280"></canvas>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript">
    $(function (){
        // 线形图 一
    new Chart($("#chart-line-1"), {
        type: 'line',
        data: {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月"],
            datasets: [{
                label: "收入",
                backgroundColor: "#33cabb",
                borderColor: "#33cabb",
                fill: false,
                data: [3000, 2500, 3500, 2300, 1950, 2900],
            }, {
                label: '支出',
                fill: false,
                backgroundColor: "#f96868",
                borderColor: "#f96868",
                data: [2300, 1800, 2000, 1500, 1200, 1350],
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                  position: 'top',
                },
                title: {
                  display: true,
                  text: '我的收支情况'
                },
            }
        }
    });
    // 线形图 二
    new Chart($("#chart-line-2"), {
        type: 'line',
        data: {
            labels: ['第一天', '第二天', '第三天', '第四天', '第五天', '第六天'],
            datasets: [
                {
                    label: 'Dataset',
                    data: [93, 67, 58, 26, 13, 45],
                    borderColor: "#f96868",
                    backgroundColor: "rgba(249, 104, 104, 0.5)",
                    pointStyle: 'circle',
                    pointRadius: 10,
                    pointHoverRadius: 15
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '点样式',
                }
            }
        }
    });
    // 线形图 三
    new Chart($('#chart-line-3'), {
        type: 'line',
        data: {
            labels: ['第一天', '第二天', '第三天', '第四天', '第五天', '第六天'],
            datasets: [
                {
                    label: '出货量(吨)',
                    data: [37, 59, 12, 89, 29, 65],
                    borderColor: "#f96868",
                    fill: false,
                    stepped: true,
                }
            ]
        },
        options: {
            responsive: true,
            interaction: {
                intersect: false,
                axis: 'x'
            },
            plugins: {
                title: {
                    display: true,
                    text: '阶梯线图',
                }
            }
        }
    });
    // 线形图 四
    new Chart($('#chart-line-4'), {
        type: 'line',
        data: {
            labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
            datasets: [
                {
                    label: '未填充的',
                    fill: false,
                    backgroundColor: "#33cabb",
                    borderColor: "#33cabb",
                    data: [11, 29, 46, 15, 33, 55],
                }, {
                    label: '虚线',
                    fill: false,
                    backgroundColor: "#15c377",
                    borderColor: "#15c377",
                    borderDash: [5, 5],
                    data: [37, 39, 66, 25, 93, 75],
                }, {
                    label: '填满的',
                    backgroundColor: "#f96868",
                    borderColor: "#f96868",
                    data: [28, 13, 85, 35, 63, 45],
                    fill: true,
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: '线条的造型'
                },
            },
            interaction: {
                mode: 'index',
                intersect: false
            },
            scales: {
                x: {
                    display: true,
                    title: {
                        display: true,
                        text: '月份'
                    }
                },
                y: {
                    display: true,
                    title: {
                        display: true,
                        text: '数量'
                    }
                }
            }
        },
    });
    // 垂直条形图
    new Chart($('#chart-vbar-1'), {
        type: 'bar',
        data: {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
            datasets: [
                {
                    label: '收入',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    borderColor: "#33cabb",
                    backgroundColor: "rgba(51, 202, 187, 0.5)",
                },
                {
                    label: '支出',
                    data: [10, 59, 80, 58, 20, 55, 40],
                    borderColor: "#f96868",
                    backgroundColor: "rgba(244, 66, 54, 0.5)",
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '收支条形图'
                }
            }
        },
    });
    // 边框圆角的条形图
    new Chart($('#chart-vbar-2'), {
      type: 'bar',
      data: {
        labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        datasets: [
          {
            label: '完全的圆角',
            data: [10, 59, 80, 58, 20, 55, 40],
            borderColor: "#33cabb",
            backgroundColor: "rgba(51, 202, 187, 0.5)",
            borderWidth: 2,
            borderRadius: 100,
            borderSkipped: false,
          },
          {
            label: '很小的圆角',
            data: [-28, 48, 40, 19, 86, 27, 90],
            borderColor: "#f96868",
            backgroundColor: "rgba(244, 66, 54, 0.5)",
            borderWidth: 2,
            borderRadius: 5,
            borderSkipped: false,
          }
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '边框圆角的条形图'
          }
        }
      },
    });
    // 水平条形图
    new Chart($('#chart-hbar'), {
      type: 'bar',
      data: {
        labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        datasets: [
          {
            label: '收入',
            data: [10, 59, 80, 58, 20, 55, 40],
            borderColor: "#33cabb",
            backgroundColor: "rgba(51, 202, 187, 0.5)",
          },
          {
            label: '支出',
            data: [28, 48, 40, 19, 86, 27, 90],
            borderColor: "#f96868",
            backgroundColor: "rgba(244, 66, 54, 0.5)",
          }
        ]
      },
      options: {
        indexAxis: 'y',
        elements: {
          bar: {
            borderWidth: 2,
          }
        },
        responsive: true,
        plugins: {
          legend: {
            position: 'right',
          },
          title: {
            display: true,
            text: '水平条形图'
          }
        }
      },
    })
    // 浮动条形图
    new Chart($('#chart-float-bar'), {
      type: 'bar',
      data: {
        labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        datasets: [
          {
            label: '数据一',
            data: [[10, 18], [59, 63], [80, 98], [-58, -23], [20, 55], [55, 60], [-40, -30]],
            backgroundColor: "#f96868",
          },
          {
            label: '数据二',
            data: [[20, 28], [-48, -35], [40, 55], [19, 25], [86, 99], [-27, -22], [90, 95]],
            backgroundColor: "#33cabb",
          },
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '浮动条形图'
          }
        }
      }
    });
    // 堆叠条形图
    new Chart($('#chart-stacked-bar'), {
      type: 'bar',
      data: {
        labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        datasets: [
          {
            label: '数据 1',
            data: [10, 59, 80, 58, 20, 55, 40],
            backgroundColor: "#f96868",
          },
          {
            label: '数据 2',
            data: [22, 56, -18, 68, 70, 33, 96],
            backgroundColor: "#33cabb",
          },
          {
            label: '数据 3',
            data: [-5, 39, 55, 38, 27, 25, 30],
            backgroundColor: "#15c377",
          },
        ]
      },
      options: {
        plugins: {
          title: {
            display: true,
            text: '堆叠条形图'
          },
        },
        responsive: true,
        scales: {
          x: {
            stacked: true,
          },
          y: {
            stacked: true
          }
        }
      }
    });
    // 饼图
    new Chart($('#chart-pie'), {
      type: 'pie',
      data: {
        labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
        datasets: [
          {
            label: '数据 1',
            data: [10, 15, 46, 8, 21],
            backgroundColor: ["#f44236", "#faa64b", "#fcc525", "#15c377", "#007bff"],
          }
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '饼图'
          }
        }
      },
    });
    // 环形图
    new Chart($('#chart-doughnut'), {
      type: 'doughnut',
      data: {
        labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
        datasets: [
          {
            label: '数据 1',
            data: [10, 15, 46, 8, 21],
            backgroundColor: ["#f44236", "#faa64b", "#fcc525", "#15c377", "#007bff"],
          }
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '环形图'
          }
        }
      },
    });
    // 雷达图
    new Chart($('#chart-radar'), {
      type: 'radar',
      data: {
        labels: ["饮食", "饮酒", "睡眠", "设计", "编码", "骑行", "运动"],
        datasets: [
          {
            label: '张三',
            data: [65, 59, 90, 81, 56, 55, 40],
            borderColor: "rgba(0, 0, 0, 0)",
            backgroundColor: "rgba(0, 123, 255, 0.7)",
          },
          {
            label: '李四',
            data: [28, 48, 40, 19, 96, 27, 100],
            borderColor: "rgba(0, 0, 0, 0)",
            backgroundColor: "rgba(244, 66, 54, 0.7)",
          }
        ]
      },
      options: {
        responsive: true,
        plugins: {
          title: {
            display: true,
            text: '雷达图'
          }
        }
      },
    });
    // 极区图
    new Chart($('#chart-polar'), {
      type: 'polarArea',
      data: {
        labels: ["红色", "绿色", "橙色", "灰色", "蓝色"],
        datasets: [
          {
            label: 'Dataset 1',
            data: [11, 16, 7, 3, 14],
            backgroundColor: [
              'rgba(244, 66, 54, 0.95)',
              'rgba(21, 195, 119, 0.95)',
              'rgba(250, 166, 75, 0.95)',
              'rgba(108, 117, 125, 0.95)',
              'rgba(0, 123, 255, 0.95)'
            ]
          }
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '极区图'
          }
        }
      },
    });
    // 气泡图
    new Chart($('#chart-bubble'), {
      type: 'bubble',
      data: {
        datasets: [
          {
            label: '粉红色',
            data: [{
                x: 8,
                y: 24,
                r: 18
            },
            {
                x: 20,
                y: 30,
                r: 15
            },
            {
                x: 40,
                y: 10,
                r: 10
            }],
            borderColor: "#f96197",
            backgroundColor: "rgba(249, 97, 151, 0.5)",
          },
          {
            label: '蓝色',
            data: [{
                x: 10,
                y: 35,
                r: 5
            },
            {
                x: 5,
                y: 5,
                r: 20
            },
            {
                x: 30,
                y: 15,
                r: 10
            }],
            borderColor: "#007bff",
            backgroundColor: "rgba(0, 123, 255, 0.5)",
          }
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '气泡图'
          }
        }
      },
    });
    // 离散图
    new Chart($('#chart-scatter'), {
      type: 'scatter',
      data: {
        datasets: [
          {
            label: '数据 1',
            data: [{
                x: -21,
                y: -87,
            }, {
                x: 75,
                y: -81,
            }, {
                x: 28,
                y: 17,
            }, {
                x: -12,
                y: 97,
            }, {
                x: 76,
                y: 66,
            }, {
                x: 6,
                y: -66,
            }, {
                x: 39,
                y: 36,
            }],
            borderColor: "#f96197",
            backgroundColor: "rgba(249, 97, 151, 0.5)",
          },
          {
            label: '数据 2',
            data: [{
                x: -6,
                y: -61,
            }, {
                x: -45,
                y: 90,
            }, {
                x: 28,
                y: -63,
            }, {
                x: 40,
                y: -66,
            }, {
                x: 29,
                y: -71,
            }, {
                x: -60,
                y: -84,
            }, {
                x: -72,
                y: 40,
            }],
            borderColor: "#007bff",
            backgroundColor: "rgba(0, 123, 255, 0.5)",
          }
        ]
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: '离散图'
          }
        }
      },
    });
    // 混合图表
    new Chart($('#chart-mixed'), {
      type: 'line',
      data: {
        labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        datasets: [
          {
            label: '数据 1',
            data: [10, 59, 80, 58, 20, 55, 40],
            borderColor: "#f96197",
            backgroundColor: "rgba(249, 97, 151, 0.5)",
            stack: 'combined',
            type: 'bar'
          },
          {
            label: '数据 2',
            data: [22, 56, 18, 68, 70, 33, 96],
            borderColor: "#007bff",
            backgroundColor: "rgba(0, 123, 255, 0.5)",
            stack: 'combined'
          }
        ]
      },
      options: {
        plugins: {
          title: {
            display: true,
            text: '堆积折线图/条形图'
          }
        },
        scales: {
          y: {
            stacked: true
          }
        }
      },
    });
    })
    </script>